import React from 'react';
import PropTypes from 'prop-types';
import movieImage from './moren.png';
import './index.css';

const MovieCustom = ({
    data
}) => (
    <div>
        {
            data.map(item => { 
                console.log(item);
                return (
                    <div key={item.id} className="block">
                        <div className="blockImage">
                            <img src={item.images ? item.images : movieImage} />
                        </div>
                        <div className="blockContent">
                            <p> {item.title} </p> 
                            <p> 
                                <span> 导演：{
                                    item.directors.map(director => {
                                        return director
                                    })
                                } </span> 
                                /
                                <span> 主演：{
                                    item.casts.map(cast => {
                                        return cast + "/"
                                    })
                                } </span>
                                
                            </p>
                            <p> {item.year} / {item.genres.map(genre => { return genre})} </p>
                            <p> {item.collect_count}人评价 </p>
                        </div>
                    </div>
                ) 
            })
        }
    </div>
)

MovieCustom.propTypes = {
    data: PropTypes.array.isRequired
}

export default MovieCustom;